/**
 * 智能通风系统控制模块
 * 负责与Android端WebViewJsVentilationInterface通信，获取数据并渲染界面
 */

// 添加用于强制重绘的CSS样式
document.addEventListener('DOMContentLoaded', function () {
    const style = document.createElement('style');
    style.textContent = `
        .force-redraw {
            transform: translateZ(0);
            backface-visibility: hidden;
            perspective: 1000px;
        }
    `;
    document.head.appendChild(style);
});

// 设备类型常量
const DEVICE_TYPES = {
    NATURAL_WINDOW: 'NATURAL_WINDOW',    // 自然通风窗
    AXIAL_WINDOW: 'AXIAL_WINDOW',        // 轴流通风窗
    CIRCULATION_WINDOW: 'CIRCULATION_WINDOW', // 环流通风窗
    AXIAL_FAN: 'AXIAL_FAN',              // 轴流风机
    CIRCULATION_FAN: 'CIRCULATION_FAN',  // 环流风机
    UNKNOWN: 'UNKNOWN'                   // 未知类型
};

// 初始化状态变量
let deviceStatus = {};
let updateTimer = null;

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', function () {
    // 初始化界面
    initUI();

    // 获取当前活动标签
    const activeTab = document.querySelector('.tab.active');
    if (activeTab) {
        const tabId = activeTab.getAttribute('data-tab');

        // 确保正确显示初始标签内容
        showTab(tabId);

        // 加载当前选中标签的数据
        loadVentilationData(tabId);
    } else {
        // 如果没有活动标签，默认显示第一个标签
        const firstTab = document.querySelector('.tab');
        if (firstTab) {
            const tabId = firstTab.getAttribute('data-tab');
            showTab(tabId);
            loadVentilationData(tabId);
        }
    }

    // 设置定时更新
    startAutoUpdate();

    // 应用权限控制
    if (window.PermissionUtils) {
        window.PermissionUtils.applyPermissionControls();
    }

    // 在此处添加事件监听器
    $(document).on('click', '.btn-goto-settings', function() {
        // 跳转到系统配置页面，并通过URL哈希传递参数
        window.location.href = 'settings.html#intelligent-ventilation';
    });
});

/**
 * 显示指定的tab
 * @param {string} tabId 标签页ID
 */
function showTab(tabId) {
    console.log(`切换到标签: ${tabId}`);

    // 移除所有活动标签页样式
    document.querySelectorAll('.tab').forEach(tab => {
        tab.classList.remove('active');
    });

    // 隐藏所有内容区域
    document.querySelectorAll('.tab-content').forEach(content => {
        content.style.display = 'none';
        content.classList.remove('active');
    });

    // 设置当前标签页为活动状态
    const selectedTab = document.querySelector(`.tab[data-tab="${tabId}"]`);
    if (selectedTab) {
        selectedTab.classList.add('active');
    }

    // 显示相应的内容区域
    const selectedContent = document.getElementById(tabId);
    if (selectedContent) {
        selectedContent.style.display = 'block';
        selectedContent.classList.add('active');
    }
}

/**
 * 初始化UI界面交互
 */
function initUI() {
    // 标签页切换
    document.querySelectorAll('.tab').forEach(tab => {
        tab.addEventListener('click', function () {
            const tabId = this.getAttribute('data-tab');
            showTab(tabId);
            // 加载当前选项卡相关数据
            loadVentilationData(tabId);
        });
    });

    // 全局操作按钮事件
    document.querySelectorAll('.global-actions .btn-action').forEach(btn => {
        // 添加权限属性
        if (!btn.hasAttribute('data-permission')) {
            btn.setAttribute('data-permission', 'control_device');
        }

        btn.addEventListener('click', function () {
            const actionType = this.getAttribute('data-action') ||
                (this.textContent.trim().includes('开') ? 'on' :
                    this.textContent.trim().includes('关') ? 'off' : 'stop');

            // 获取按钮上设置的设备类型
            const deviceType = this.getAttribute('data-type') || getCurrentDeviceType();

            // 全局按钮总是控制所有设备，所以设置isControlAll=true
            controlDevice(deviceType, actionType, { isControlAll: true });
        });
    });

    // 如果有权限控制工具，应用权限控制
    if (window.PermissionUtils) {
        window.PermissionUtils.applyPermissionControls();
    }
}

/**
 * 获取当前选中的设备类型
 */
function getCurrentDeviceType() {
    const activeTab = document.querySelector('.tab.active');
    if (!activeTab) return DEVICE_TYPES.UNKNOWN;

    const tabId = activeTab.getAttribute('data-tab');

    switch (tabId) {
        case 'tab1': return DEVICE_TYPES.NATURAL_WINDOW;  // 自然通风窗
        case 'tab2': return DEVICE_TYPES.AXIAL_WINDOW;    // 轴流通风窗
        case 'tab3': return DEVICE_TYPES.CIRCULATION_WINDOW; // 环流通风窗
        case 'tab4': return DEVICE_TYPES.AXIAL_FAN;       // 轴流风机
        case 'tab5': return DEVICE_TYPES.CIRCULATION_FAN; // 环流风机
        case 'tab-config': return 'CONFIG'; // 配置管理
        default: return DEVICE_TYPES.UNKNOWN;
    }
}

/**
 * 从Android端加载通风系统数据
 * @param {string} tabId 当前标签页ID
 */
function loadVentilationData(tabId) {
    // 如果是配置管理tab，则加载配置数据
    if (tabId === 'tab-config') {
        loadVentilationConfigData();
        return;
    }

    // 获取当前设备类型
    const deviceSubType = getCurrentDeviceType();

    // 开发测试模式下使用模拟数据
    if (shouldUseMockData()) {
        const mockData = IntelligentVentilationMockData.generateMockData(deviceSubType);
        updateDeviceStatus(mockData, deviceSubType);
        triggerRedraw();
        return;
    }

    try {
        // 准备请求参数 - 使用DTO结构
        const params = {
            deviceSubType: deviceSubType
        };

        // 调用Android原生接口获取数据
        callAndroidMethodAsync('getVentilationData', params)
            .then(response => {
                if (response.success) {
                    updateDeviceStatus(response.data, deviceSubType);
                    triggerRedraw();
                } else {
                    console.error('获取数据失败: ' + (response.msg || '未知错误'));
                }
            })
            .catch(error => {
                console.error('API调用失败:', error);
            });
    } catch (error) {
        console.error('加载数据出错', error);
    }
}

/**
 * 从Android端加载通风配置数据
 */
function loadVentilationConfigData() {
    console.log('开始加载智能通风配置数据...');

    // 使用Android原生接口获取数据, 注意第一个参数传null或空对象{}
    callAndroidMethodAsync('VentilationConfig.getVentilationConfigList', {})
        .then(response => {
            if (response && response.success) {
                console.log('成功获取通风配置数据:', response.data);
                // 渲染配置表格
                if (window.renderVentilationConfigTable) {
                    window.renderVentilationConfigTable(response.data);
                }
            } else {
                console.error('获取通风配置数据失败:', response ? response.message : '无响应');
                showInfoDialog('加载配置失败，请稍后重试。', 'error');
            }
        })
        .catch(error => {
            console.error('调用getVentilationConfigList失败:', error);
            showInfoDialog('加载配置失败，请检查应用连接。', 'error');
        });
}

/**
 * 更新通风配置数据到Android端
 * @param {object} configData - 单条配置数据
 */
function updateVentilationConfig(configData) {
    console.log('开始更新智能通风配置数据:', configData);

    // 调用Android原生接口更新数据
    callAndroidMethodAsync('VentilationConfig.updateVentilationConfig', configData)
        .then(response => {
            if (response && response.success) {
                console.log('成功更新通风配置数据');
                showInfoDialog('配置保存成功!', 'success');
                // 重新加载数据以刷新表格
                loadVentilationConfigData();
            } else {
                console.error('更新通风配置数据失败:', response ? response.message : '无响应');
                showInfoDialog(`配置保存失败: ${response ? response.message : '未知错误'}`, 'error');
            }
        })
        .catch(error => {
            console.error('调用updateVentilationConfig失败:', error);
            showInfoDialog('配置保存失败，请检查应用连接。', 'error');
        });
}


/**
 * 触发页面重绘，解决卡片显示不全的问题
 */
function triggerRedraw() {
    // 延迟执行，确保DOM已更新
    setTimeout(() => {
        // 获取当前活动的标签内容
        const activeTabContent = document.querySelector('.tab-content.active');
        if (!activeTabContent) return;

        // 获取卡片容器
        const container = activeTabContent.querySelector('.cards-container');
        if (!container) return;

        // 强制触发重绘
        container.classList.add('force-redraw');

        // 确保所有卡片按钮可见
        const cards = container.querySelectorAll('.device-card');
        cards.forEach(card => {
            const actions = card.querySelector('.device-actions');
            if (actions) {
                // 确保按钮可见
                actions.style.visibility = 'visible';
                actions.style.display = 'flex';

                // 确保按钮文本可见
                const buttons = actions.querySelectorAll('button');
                buttons.forEach(button => {
                    button.style.overflow = 'visible';
                    button.style.whiteSpace = 'nowrap';
                });
            }
        });

        // 移除类名，完成重绘
        setTimeout(() => {
            container.classList.remove('force-redraw');

            // 强制重新计算布局
            if (container.offsetHeight) {
                const forceReflow = container.offsetHeight;
            }
        }, 50);
    }, 100);
}
/**
 * 渲染通风配置表格
 * @param {Array<Object>} configList - 从后端获取的配置列表
 */
window.renderVentilationConfigTable = function(configList) {
    const tbody = document.querySelector('#ventilation-config-table tbody');
    if (!tbody) {
        console.error('无法找到配置表格的tbody元素');
        return;
    }

    // 将数据转换为以deviceType为键的Map，方便查找
    const configMap = new Map(configList.map(item => [item.deviceType, item]));

    // 预定义的设备类型和它们的显示名称
    const deviceTypes = [
        { key: 'NATURAL_WINDOW', name: '自然通风窗' },
        { key: 'AXIAL_FAN', name: '轴流风机' },
        { key: 'CIRCULATION_FAN', name: '环流风机' }
    ];

    tbody.innerHTML = ''; // 清空现有内容

    deviceTypes.forEach(device => {
        const config = configMap.get(device.key) || {
            // 提供默认值，以防后端数据不完整
            deviceType: device.key,
            targetTemperature: 25,
            targetHumidity: 60,
            startTime: '08:00',
            endTime: '18:00',
            duration: 30
        };

        const row = document.createElement('tr');
        row.setAttribute('data-device-type', device.key);
        row.innerHTML = `
            <td>${device.name}</td>
            <td data-field="targetTemperature">${config.targetTemperature}</td>
            <td data-field="targetHumidity">${config.targetHumidity}</td>
            <td data-field="timeRange">${config.startTime} - ${config.endTime}</td>
            <td data-field="duration">${config.duration}</td>
            <td>
                <button class="btn-edit-config" data-permission="manage_config">修改</button>
            </td>
        `;
        tbody.appendChild(row);
    });

    // 重新绑定编辑按钮的事件
    bindConfigEditButtons();
    // 应用权限
    if (window.PermissionUtils) {
        window.PermissionUtils.applyPermissionControlsToElement(tbody);
    }
};


/**
 * 绑定配置修改按钮的事件
 */
function bindConfigEditButtons() {
    document.querySelectorAll('.btn-edit-config').forEach(button => {
        // 移除旧的事件监听器，防止重复绑定
        const newButton = button.cloneNode(true);
        button.parentNode.replaceChild(newButton, button);

        newButton.addEventListener('click', function() {
            const row = this.closest('tr');
            const deviceType = row.getAttribute('data-device-type');
            const deviceName = row.cells[0].textContent;
            
            // 从表格行中提取当前数据
            const currentData = {
                deviceType: deviceType,
                targetTemperature: parseFloat(row.querySelector('[data-field="targetTemperature"]').textContent),
                targetHumidity: parseFloat(row.querySelector('[data-field="targetHumidity"]').textContent),
                timeRange: row.querySelector('[data-field="timeRange"]').textContent.split(' - '),
                duration: parseInt(row.querySelector('[data-field="duration"]').textContent)
            };
            
            // 显示编辑弹框
            showConfigEditModal(deviceName, currentData, (updatedData) => {
                 // 保存成功后的回调
                console.log('配置已更新, 准备发送到后端:', updatedData);
                // 调用真正的更新函数
                updateVentilationConfig(updatedData);
            });
        });
    });
}

/**
 * 显示配置编辑弹框
 * @param {string} deviceName - 设备显示名称
 * @param {object} currentData - 当前配置数据
 * @param {function} onSave - 保存按钮的回调函数
 */
function showConfigEditModal(deviceName, currentData, onSave) {
    const [startTime, endTime] = currentData.timeRange;

    const modalHTML = `
        <div class="modal-overlay active"></div>
        <div class="modal-container active" id="config-edit-modal">
            <div class="modal-header">
                <h2>修改配置 - ${deviceName}</h2>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <form id="config-edit-form" class="form-grid">
                    <div class="form-group">
                        <label for="targetTemperature">目标温度 (°C)</label>
                        <input type="number" id="targetTemperature" value="${currentData.targetTemperature}" required>
                    </div>
                    <div class="form-group">
                        <label for="targetHumidity">目标湿度 (%)</label>
                        <input type="number" id="targetHumidity" value="${currentData.targetHumidity}" required>
                    </div>
                    <div class="form-group">
                        <label for="startTime">开始时间</label>
                        <input type="time" id="startTime" value="${startTime}" required>
                    </div>
                    <div class="form-group">
                        <label for="endTime">结束时间</label>
                        <input type="time" id="endTime" value="${endTime}" required>
                    </div>
                    <div class="form-group">
                        <label for="duration">持续时长 (分钟)</label>
                        <input type="number" id="duration" value="${currentData.duration}" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-cancel">取消</button>
                <button class="btn btn-save">保存</button>
            </div>
        </div>
    `;

    // 移除已存在的弹框
    const existingModal = document.getElementById('config-edit-modal');
    if (existingModal) {
        existingModal.parentElement.removeChild(existingModal.previousElementSibling); // remove overlay
        existingModal.parentElement.removeChild(existingModal);
    }


    document.body.insertAdjacentHTML('beforeend', modalHTML);

    const modal = document.getElementById('config-edit-modal');
    const overlay = modal.previousElementSibling;

    // --- 事件处理 ---
    const closeModal = () => {
        modal.classList.remove('active');
        overlay.classList.remove('active');
        setTimeout(() => {
            document.body.removeChild(modal);
            document.body.removeChild(overlay);
        }, 300);
    };

    modal.querySelector('.close-btn').addEventListener('click', closeModal);
    modal.querySelector('.btn-cancel').addEventListener('click', closeModal);
    
    modal.querySelector('.btn-save').addEventListener('click', () => {
        // ... 表单数据提取和校验 ...
        const form = document.getElementById('config-edit-form');
        const updatedStartTime = form.querySelector('#startTime').value;
        const updatedEndTime = form.querySelector('#endTime').value;
        const updatedDuration = parseInt(form.querySelector('#duration').value, 10);

        // 时间校验逻辑
        const startTotalMinutes = parseInt(updatedStartTime.split(':')[0], 10) * 60 + parseInt(updatedStartTime.split(':')[1], 10);
        const endTotalMinutes = parseInt(updatedEndTime.split(':')[0], 10) * 60 + parseInt(updatedEndTime.split(':')[1], 10);
        let timeRangeMinutes = endTotalMinutes - startTotalMinutes;
        
        if (timeRangeMinutes < 0) {
           // 跨天了
           timeRangeMinutes += 24 * 60;
        }

        if (updatedDuration > timeRangeMinutes) {
            showInfoDialog('错误', '持续时长不能超过应用时间段的总时长。', 'error');
            return;
        }
        
        // 构造要保存的数据
        const dataToSave = {
            deviceType: currentData.deviceType,
            targetTemperature: parseFloat(form.querySelector('#targetTemperature').value),
            targetHumidity: parseFloat(form.querySelector('#targetHumidity').value),
            startTime: updatedStartTime,
            endTime: updatedEndTime,
            duration: updatedDuration
        };

        if (onSave) {
            onSave(dataToSave);
        }
        closeModal();
    });

    // 强制弹框在最前
    modal.style.zIndex = '1001';
    overlay.style.zIndex = '1000';
}
/**
 * 控制设备（支持单个或批量）
 * @param {string} deviceType 设备类型
 * @param {string} action 操作类型：on/off/stop
 * @param {Object} options 选项
 * @param {string|number} [options.deviceId] 设备ID（单个设备控制时需要）
 * @param {string} [options.pointAddress] 测点地址（单个设备控制时需要）
 * @param {boolean} [options.isControlAll=false] 是否批量控制
 */
function controlDevice(deviceType, action, options = {}) {
    const { deviceId, pointAddress, isControlAll = false } = options;

    // 权限检查 - 只有操作员可以控制设备
    if (window.PermissionUtils && !window.PermissionUtils.hasPermission(window.PermissionUtils.PERMISSIONS.CONTROL_DEVICE)) {
        console.warn('权限不足：当前用户无设备控制权限');

        // 确保showToast函数可用
        if (typeof window.showToast === 'function') {
            window.showToast('您没有权限控制设备', 'error');
        } else {
            alert('您没有权限控制设备');
        }
        return;
    }

    try {
        // 准备请求参数 - 使用DTO结构
        const params = {
            deviceSubType: deviceType,
            action: action,
            controlAll: isControlAll
        };
        // 开发测试模式下模拟成功响应
        if (shouldUseMockData()) {
            let response;
            if (isControlAll) {
                response = IntelligentVentilationMockData.mockControlAllDevices(deviceType, action);
            } else {
                response = IntelligentVentilationMockData.mockControlDevice(deviceType, params.deviceId, action, pointAddress);
            }
            console.log(response.msg);
            // 简单刷新数据
            loadVentilationData();
            return;
        }

        // 如果是单个设备控制，添加设备ID和测点地址
        if (!isControlAll) {
            if (deviceId) {
                params.deviceId = deviceId;
            }
            if (pointAddress) {
                console.log("控制单个设备,添加测点地址:", pointAddress);
                params.pointAddress = pointAddress;
            } else {
                console.warn("警告: 测点地址为空!");
            }
        }

        console.log('发送控制命令:', params);

        // 调用Android原生接口控制设备
        callAndroidMethodAsync('controlVentilation', params)
            .then(response => {
                if (response.success) {
                    console.log(isControlAll ? '批量操作成功' : '操作成功');
                    
                    // 记录操作成功日志
                    if (window.operationLogger) {
                        window.operationLogger.logDeviceControl(
                            deviceType,
                            isControlAll ? '批量操作' : deviceId,
                            action,
                            true
                        );
                    }
                    
                    // 重新加载数据
                    loadVentilationData();
                } else {
                    WaromUtils.showError(response.msg);
                    console.error((isControlAll ? '批量操作' : '操作') + '失败: ' + (response.msg || '未知错误'));
                    
                    // 记录操作失败日志
                    if (window.operationLogger) {
                        window.operationLogger.logDeviceControl(
                            deviceType,
                            isControlAll ? '批量操作' : deviceId,
                            action,
                            false,
                            response.msg || '未知错误'
                        );
                    }
                }
            })
            .catch(error => {
                console.error('API调用失败:', error);
                
                // 记录操作失败日志
                if (window.operationLogger) {
                    window.operationLogger.logDeviceControl(
                        deviceType,
                        isControlAll ? '批量操作' : deviceId,
                        action,
                        false,
                        error.message || '网络错误'
                    );
                }
            });
    } catch (error) {
        console.error(isControlAll ? '批量控制设备出错' : '控制设备出错', error);
    }
}

/**
 * 控制所有设备（为保持向后兼容，调用合并后的controlDevice函数）
 * @param {string} deviceType 设备类型
 * @param {string} action 操作类型：on/off/stop
 */
function controlAllDevices(deviceType, action) {
    controlDevice(deviceType, action, { isControlAll: true });
}

/**
 * 更新设备状态
 * @param {Array} data 设备数据
 * @param {string} deviceType 设备类型
 */
function updateDeviceStatus(data, subDeviceType) {
    if (!data || !Array.isArray(data)) return;

    // 使用通用设备状态更新函数
    updateDevicesUI(data, subDeviceType);
}

/**
 * 通用设备状态更新函数 - 支持所有设备类型
 * @param {Array} data 设备数据
 * @param {string} deviceType 设备类型
 */
function updateDevicesUI(data, deviceType) {
    console.log(`更新${getDeviceTypeDisplayName(deviceType)}状态:`, data);

    // 确定标签页ID
    const tabId = getTabIdForDeviceType(deviceType);
    const container = document.querySelector(`#${tabId} .cards-container`);

    if (!container) {
        console.error(`找不到${deviceType}容器元素`);
        return;
    }

    // 清空容器
    container.innerHTML = '';

    // 检查数据是否有效
    if (!isValidData(data)) {
        showEmptyData(container, deviceType, "未找到");
        return;
    }

    // 有数据时，移除居中样式
    container.classList.remove('empty-container');

    // 直接渲染设备卡片
    renderDeviceCards(container, data, deviceType);

    // 添加点击事件监听器，处理卡片显示不全的问题
    if (!container.hasAttribute('data-click-handler-added')) {
        container.setAttribute('data-click-handler-added', 'true');
        container.addEventListener('click', function (event) {
            // 如果点击了容器，但不是点击了具体的按钮，触发重绘
            if (event.target === this || !event.target.closest('button')) {
                // 触发重绘
                this.classList.add('force-redraw');
                setTimeout(() => {
                    this.classList.remove('force-redraw');
                }, 10);
            }
        });
    }

    // 记录日志
    console.log(`${getDeviceTypeDisplayName(deviceType)}状态更新完成，共有 ${data.length} 个设备`);
}

/**
 * 检查数据是否有效
 * @param {Array} data 设备数据
 * @returns {boolean} 数据是否有效
 */
function isValidData(data) {
    return data && Array.isArray(data) && data.length > 0;
}

/**
 * 显示空数据提示
 * @param {HTMLElement} container 容器元素
 * @param {string} deviceType 设备类型
 * @param {string} message 提示消息前缀
 * @param {boolean} isError 是否为错误提示
 */
function showEmptyData(container, deviceType, message, isError = false) {
    // 无数据时，添加居中样式
    container.classList.add('empty-container');
    console.warn(`${deviceType}数据为空或格式不正确`);

    // 显示空数据提示
    const emptyElement = document.createElement('div');
    emptyElement.className = 'empty-data';

    // 根据不同情况使用不同图标
    const icon = isError ? 'layui-icon-face-cry' : 'layui-icon-about';

    emptyElement.innerHTML = `
        <i class="layui-icon ${icon}"></i>
        <p>${message}${getDeviceTypeDisplayName(deviceType)}数据</p>
        `;
    container.appendChild(emptyElement);
}

/**
 * 渲染设备卡片
 * @param {HTMLElement} container 容器元素
 * @param {Array} devices 设备数据数组
 * @param {string} deviceType 设备类型
 */
function renderDeviceCards(container, devices, deviceType) {
    // 遍历设备数据直接创建卡片
    devices.forEach(device => {
        // 跳过温度等非设备数据
        if (device.name && device.name.includes('温度')) {
            return;
        }

        const card = createDeviceCard(device, deviceType);
        container.appendChild(card);
    });

    // 添加设备控制按钮事件
    addDeviceControlEvents(deviceType);

    // 强制浏览器重新计算布局，解决卡片显示不完整的问题
    setTimeout(() => {
        // 读取容器的高度会触发一次"强制同步布局"，从而修复渲染问题
        const forceReflow = container.offsetHeight;

        // 确保按钮可见
        container.querySelectorAll('.device-actions').forEach(actions => {
            actions.style.visibility = 'visible';
            actions.style.display = 'flex';
        });
    }, 50);
}

/**
 * 创建单个设备卡片
 * @param {Object} device 设备数据
 * @param {string} deviceType 设备类型
 * @returns {HTMLElement} 设备卡片元素
 */
function createDeviceCard(device, deviceType) {
    // 提取设备ID用于数据属性
    const deviceId = extractDeviceId(device.name) || '';

    // 获取设备类型显示名称
    const deviceTypeText = getDeviceTypeDisplayName(deviceType);

    // 解析设备状态
    const statusValue = parseInt(device.value) || 0;
    const statusText = statusValue > 0 ? '开启' : '关闭';
    const statusClass = statusValue > 0 ? 'status-on' : 'status-off';

    // 创建设备卡片
    const deviceCard = document.createElement('div');
    deviceCard.className = 'device-card';
    deviceCard.setAttribute('data-device', deviceId);

    // 控制按钮HTML - 添加自动按钮
    let buttonsHtml = `
        <button type="button" class="layui-btn layui-btn-normal device-control-btn" 
            data-permission="control_device" data-device="${deviceId}" data-action="on" data-address="${device.address || ''}">开启</button>
        <button type="button" class="layui-btn layui-btn-danger device-control-btn" 
            data-permission="control_device" data-device="${deviceId}" data-action="off" data-address="${device.address || ''}">关闭</button>
        <button type="button" class="layui-btn btn-auto device-control-btn" 
            data-permission="control_device" data-device="${deviceId}" data-action="auto" data-address="${device.address || ''}">自动</button>
    `;

    // 格式化设备名称 - 简洁显示
    const deviceName = device.name.replace(/\d+#/, '').replace(/自然通风窗|轴流通风窗|环流通风窗|轴流风机|环流风机/, '') || `${deviceId}号${deviceTypeText}`;
    const finalDeviceName = deviceName.trim() || `${deviceId}号${deviceTypeText}`;

    // 设置卡片内容 - 更紧凑的布局
    deviceCard.innerHTML = `
        <div class="device-header">
            <h3>${finalDeviceName}</h3>
        </div>
        
        <div class="device-params">
            <div class="param-item">
                <div class="param-label">
                    <span class="param-name">当前状态</span>
                    <span class="param-unit">(Status)</span>
                </div>
                <div class="param-value">
                ${statusValue > 0 ? '运行' : '停止'}
                </div>
            </div>
            
            <div class="param-item">
                <div class="param-label">
                    <span class="param-name">故障报警</span>
                    <span class="param-unit">(Alarm)</span>
                </div>
                <div class="param-value">
                正常
                </div>
            </div>
        </div>
        
        <div class="status-indicator">
            <span class="status-label">远程操作</span>
        </div>
        
        <div class="device-actions">
            ${buttonsHtml}
        </div>
    `;

    return deviceCard;
}

/**
 * 添加设备控制按钮事件
 * @param {string} deviceType 设备类型
 */
function addDeviceControlEvents(deviceType) {
    document.querySelectorAll('.device-control-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const deviceId = this.getAttribute('data-device');
            const action = this.getAttribute('data-action');
            const pointAddress = this.getAttribute('data-address') || '';
            
            // 特殊处理自动按钮点击
            if (action === 'auto') {
                // 切换按钮的激活状态
                this.classList.toggle('active');
                
                // 获取当前激活状态
                const isActive = this.classList.contains('active');
                
                // 显示提示消息
                showToast(`${deviceId}号设备${isActive ? '开启' : '关闭'}自动模式`, 'info');
                
                // 这里可以添加实际的自动模式控制逻辑
                // controlDevice(deviceType, isActive ? 'auto_on' : 'auto_off', { deviceId, pointAddress });
                
                return; // 不执行下面的常规控制逻辑
            }

            // 常规开关控制
            controlDevice(deviceType, action, { deviceId, pointAddress });
        });
    });

    // 应用权限控制
    if (window.PermissionUtils) {
        window.PermissionUtils.applyPermissionControls();
    }
}

/**
 * 获取设备类型对应的中文名称
 * @param {string} deviceType 设备类型常量
 * @returns {string} 设备类型中文名称
 */
function getDeviceTypeDisplayName(deviceType) {
    switch (deviceType) {
        case DEVICE_TYPES.NATURAL_WINDOW: return '自然通风窗';
        case DEVICE_TYPES.AXIAL_WINDOW: return '轴流通风窗';
        case DEVICE_TYPES.CIRCULATION_WINDOW: return '环流通风窗';
        case DEVICE_TYPES.AXIAL_FAN: return '轴流风机';
        case DEVICE_TYPES.CIRCULATION_FAN: return '环流风机';
        default: return '未知设备';
    }
}

/**
 * 获取设备类型对应的标签页ID
 * @param {string} deviceType 设备类型常量
 * @returns {string} 标签页ID
 */
function getTabIdForDeviceType(deviceType) {
    switch (deviceType) {
        case DEVICE_TYPES.NATURAL_WINDOW: return 'tab1';
        case DEVICE_TYPES.AXIAL_WINDOW: return 'tab2';
        case DEVICE_TYPES.CIRCULATION_WINDOW: return 'tab3';
        case DEVICE_TYPES.AXIAL_FAN: return 'tab4';
        case DEVICE_TYPES.CIRCULATION_FAN: return 'tab5';
        default: return '';
    }
}

/**
 * 从设备名称中提取设备ID
 * @param {string} name 设备名称
 * @returns {number|null} 设备ID或null
 */
function extractDeviceId(name) {
    const match = name.match(/(\d+)/);
    return match ? parseInt(match[1]) : null;
}

/**
 * 开始自动更新
 */
function startAutoUpdate() {
    if (updateTimer) clearInterval(updateTimer);

    // 直接使用CONFIG对象中的VENTILATION配置
    const updateInterval = CONFIG.UPDATE_INTERVALS.VENTILATION;

    console.log(`设置通风系统自动更新间隔: ${updateInterval}ms`);

    // 使用配置的更新间隔
    updateTimer = setInterval(() => {
        loadVentilationData();
    }, updateInterval);
}









